<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		     css()      功能：
			            1个参:传入CSS属性名
						功能：获取匹配元素集合中第一个元素的CSS属性值
						2个参:传入css属性名和属性值
						功能：设置匹配元素集合中第一个元素的CSS属性值
						n个参:传入多个css属性名和属性值
						语法糖：css({"属性名":"属性值",
						            "属性名":"属性值",
									.............
									"属性名":"属性值"
									})
			 width()和height()     功能：匹配元素集合中第一个元素宽高度
			                       无参：获取匹配元素集合中第一个元素宽高度
								   有参：设置匹配元素集合中第一个元素宽高度
			 outerWidth()和outerHeight()
			 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
			 无参：获取元素的宽高度，计算盒子模型：内边距+边框
			 有参：传入bool值，默认 false   true时 计算盒子模型：内外边距+边框
		 -->
		 <style>
			 .box{
				 background-color: #00ffff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid red;
			 }
			.result{
				margin-top: 10px;
				font-weight: bold;
			} 
		 </style>
	</head>
	<body>
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="bpmbtn">获取高度（内外边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击 获取颜色属性值 按钮  获取颜色值并打印页面上 */
			$("#getColorbtn").click(function(){
				// 获取CSS属性值方式：传入属性名即可
			var bgColor=$(".box").css("background-color");
			 // 页面上打印属性值  rgb(0, 255, 255)
			 $("#result").text("获取的属性值是："+bgColor);
			});
			
			/* 2. 点击 设置颜色属性值 按钮  设置颜色值并打印页面上*/
			$("#setColorbtn").click(function(){
				// 改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色");
			});
			
			/* 3.点击 设置多属性效果 按钮  圆 背景色 阴影 */
			$("#setBtn").click(function(){
				$(".box").css({"background-color":"yellow",
				                "border":"5px solid #55ff7f",
								"width":"500px",
								"height":"500px",
								"background-size":"100% 100%",
								"box-shadow":"5px 5px 10px blue",
								"border-radius":"50%",
								"background-image":"url(../img/1.gif)"
								});
			});
			
			/* 4.点击 获取,设置宽度 按钮*/
			$("#gsBtn").click(function(){
			var	w=$(".box").width(400);
			$("#result").text("获取的宽度是:"+w+"px")
			});
			
			/* 5.点击 获取高度 按钮 计算box空间高度 */
			$("#bpBtn").click(function(){
			var bp=$(".box").outerHeight();
				$("#result").text("获取高度为："+bp+"px");
			});
			
			/* 5.点击 获取高度 按钮 计算box空间高度 */
			$("#bpmbtn").click(function(){
			var bpm=$(".box").outerHeight(true);
				$("#result").text("获取高度为："+bpm+"px");
			});
		</script>
	</body>
</html>